<template>
	<view class="main" :style="{paddingBottom:(getSafeBottom)+'px'}">
		<navbar :title="id? '重新申请':'点评申请'"></navbar>
		<view class="form" :style="{paddingTop:(getStateHeight + getNavbar  ) + 'px'}">
			<view class="form-main">
				<uni-forms :modelValue="formData" ref="customForm" label-position="left" :rules="rules" label-width="300">
					<uni-forms-item label="就职公司：" name="type">
						<view class="form-select" @click="pickerOpen('acId')">
							<uni-easyinput type="text" :value="formData.acId" class="shadow"
								placeholder="请选择" disabled />
							<van-icon name="arrow-down" size="14px" color="#999" class="form-select-icon" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="岗位类别：" name="hangye">
						<view class="form-select" >
							<uni-easyinput type="text" v-model="formData.hangye" class="shadow" placeholder="请选择"
								disabled />
							<van-icon name="arrow-down" size="14px" color="#999" class="form-select-icon" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="就职岗位：" name="gangwei">
						<view class="form-select" @click="pickerOpen('gangwei')">
							<uni-easyinput type="text" v-model="formData.gangwei" class="shadow" placeholder="请选择"
								disabled />
							<van-icon name="arrow-down" size="14px" color="#999" class="form-select-icon" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="工作日期：">
						<view class="form-line">
							<uni-forms-item name="startTime">
								<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.startTime"
									class="shadow" :end="nowDate" @maskClick="maskClick" placeholder="请选择开始日期" />
							</uni-forms-item>
							<uni-forms-item name="endTime">
								<uni-datetime-picker type="date" :clear-icon="false" v-model="formData.endTime"
									class="shadow" :end="nowDate" @maskClick="maskClick" placeholder="请选择结业日期" />
							</uni-forms-item>
						</view>
					</uni-forms-item>
				</uni-forms>
			</view>

		</view>
		<view class="main-bj">

		</view>
		<view class="main-button" :style="{paddingBottom:(getSafeBottom==20? 0:getSafeBottom)+'px'}">
			<view class="main-button-submit" @click="submit">
				确认提交
			</view>
		</view>

		<picker-view ref="pickerRef" :list="columns" @confirm="onConfirm"></picker-view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import Navbar from '@/components/Navbar.vue';
	import { myToCompanyList,remarkUpdate,remarkSubmit,remarkDetail } from "@/core/web-api/qiuzhiduan.js"
	import PickerView from "@/components/PickerView.vue";
	import { getData } from "@/core/web-api/common.js"
	export default {
		components: {
			Navbar,
			PickerView
		},
		data() {
			return {
				isSend: false,
				formData: {
					acId: "", // 	企业id
					endTime: "", // 截止时间	
					gangwei: "",
					hangye: "",
					startTime: "", //开始时间
					id:null
				},
				bottomBtnHeight: uni.upx2px(140),
				rules: {},
				columns: [],
				optionsMap: {
					gangweiColumns: [],
					hangyeColumns: [],
					acIdColumns: [],
				},
				id:"",
				type:"",
				nowDate:new Date(),
			}
		},
		methods: {
			
			/**
			 * 弹窗显示
			 */
			pickerOpen(type) {
				if(type != "acId"){
					uni.showToast({
						title:"请选择企业",
						icon:"none"
					})
					return;
				}
				this.type = type;
				this.columns = this.optionsMap[type + 'Columns'];
				this.$refs.pickerRef.open();
			},
			
			/**
			 * 选择
			 */
			onConfirm() {
				let value = this.$refs.pickerRef.value;
				this.formData[this.type] = value;
				let data = this.optionsMap.acIdColumns.find(item=>item.sort==value);
				this.formData.hangye = data.hangye
				this.formData.gangwei = data.gangwei
			},
			
			/**
			 * 提交数据
			 */
			submit() {
				this.$refs.customForm.validate().then(res => {
					let dist = JSON.parse(JSON.stringify(this.formData));
					let index = this.optionsMap.acIdColumns.findIndex(item=>item.sort==this.formData.acId);
					dist.acId = this.optionsMap.acIdColumns[index].acId;
					dist.startTime = dist.startTime? dist.startTime + " 00:00:00":""
					dist.endTime = dist.endTime? dist.endTime + " 00:00:00":""
					if(!dist.startTime || !dist.endTime){
						uni.showToast({
							title:"请选择时间",
							icon:"none"
						})
					}else{
						this.save(dist);
					}
				}).catch(err => {
					console.log('err', err);
				})
			},
			
			/**
			 * 保存
			 */
			save(data){
				remarkSubmit(data).then(res=>{
					if(res.code==20000){
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					}
					uni.showToast({
						title:res.message,
						icon:"none",
						duration:1500
					})
				})
			},
			
			/**
			 * 编辑
			 */
			update(data){
				remarkUpdate(data).then(res=>{
					if(res.code==20000){
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					}
					uni.showToast({
						title:res.message,
						icon:"none",
						duration:1500
					})
				})
			},

			/**
			 * 获取我所在的企业信息
			 */
			getCompanyInfo() {
				myToCompanyList().then(res => {
					if (res.code == 20000) {
						const { list } = res.data;
						this.optionsMap['acIdColumns'] = list ? list.map(item => {
							return {
								sort: item.companyTitle+" ["+item.gangwei+"]" || "",
								id:item.id,
								...item
							}
						}) : []
						// console.log(this.optionsMap)
					}
				})
			},

			/**
			 * 加载下拉选择
			 */
			getCataList() {
				let cataNames = ['所属行业'];
				let cataList = ['hangyeColumns']
				getData({
					sortList: cataNames
				}).then(res => {
					console.log(res);
					let {
						list
					} = res.data;
					list.forEach(item => {
						let index = cataNames.findIndex(f => f == item.sort);
						this.optionsMap[cataList[index]] = item.list;
					})
				})
			},

			/**
			 * 生成表单校验规则
			 */
			getRules() {
				const dist = {
					hangye: "岗位类别",
					gangwei: "就职岗位",
					companyTitle: "就职公司",
					startTime: "开始时间",
					endTime: "结束时间",
				}
				let rules = {};
				for (let key in dist) {
					rules[key] = {
						rules: [{
							required: true,
							errorMessage: dist[key] + "不能为空"
						}]
					}
				}
				this.rules = rules;
			},
			
			/**
			 * 查看详情
			 */
			getDetail(){
				remarkDetail({id:this.id}).then(res=>{
					if(res.code==20000){
						const {detail} = res.data;
						detail.startTime = detail.startTime? detail.startTime.split(" ")[0]:""
						detail.endTime = detail.endTime? detail.endTime.split(" ")[0]:""
						for(let key in this.formData){
							this.formData[key] = detail[key];
						}
						this.formData.acId = detail.acTitle
					}
				})
			},
		},
		onReady() {
			this.$refs.customForm.setRules(this.rules)
		},
		computed: {
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom']),
		},
		created() {
			this.getCataList();
		},
		onLoad(options){
			this.getCompanyInfo()
			this.id = options.id;
			if(this.id){
				this.getDetail()
			}
		}
	}
</script>

<style scoped lang="less">
	.br {
		margin-bottom: 20upx;
	}

	.main {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;

		&-button {
			width: 100%;
			position: fixed;
			background-color: #f5f5f5;
			left: 0;
			bottom: 0;
			padding-top: 10upx;
			height: 100upx;
			text-align: center;
			line-height: 100upx;
			font-size: 30upx;
			display: flex;

			&-submit {
				width: 100%;
				background: linear-gradient(to top, #6fabfd, #5371fd);
				color: #ffffff;
				box-sizing: border-box;
			}
		}

		&-bj {
			width: 100%;
			height: 50vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
			background: linear-gradient(to bottom, #bdccfb, #f5f5f5);
		}
	}

	.form {
		width: 100%;
		margin-top: 40upx;
		
		&-select {
			position: relative;
		
			&-icon{
				position: absolute;
				right: 20upx;
				height: 60upx;
				display: flex;
				align-items: center;
				top: 0;
			}
		}

		&-button {
			height: 80upx;
			text-align: center;
			line-height: 80upx;
			border-radius: 10upx;
			font-size: 30upx;
			width: 598upx;
			background: linear-gradient(to bottom, #5472fd, #6ca5fd);
			color: #ffffff;
		}

		&-main {
			padding: 40upx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 10upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			min-height: 60vh;
		}

		&-code {
			width: 100%;
			display: flex;
			height: 60upx;
			border-radius: 10upx;
			border: 1upx solid #ccc;
			align-items: center;

			&-input {
				display: flex;
				align-items: center;
				flex: 1;
			}

			input {
				padding-left: 20upx;
				box-sizing: border-box;
				width: 220upx;
			}

			text {
				// font-size: 26upx;
				// color: #666666;
				// font-weight: bold;
				// line-height: 26upx;
				display: block;
				height: 24upx;
				width: 4upx;
				background-color: #666;
			}

			&-btn {
				width: 123upx;
				height: 42upx;
				border-radius: 6upx;
				border: 1upx solid #0180ff;
				font-size: 22upx;
				color: #0180ff;
				background-color: #f9f9f9;
				text-align: center;
				line-height: 42upx;
				margin-right: 10upx;

				&.disabled {
					border-color: #ccc;
					color: #666;

				}
			}
		}

		&-line {
			display: flex;
			align-items: center;
		}

		/deep/ .uni-easyinput__content:not(.is-textarea) {
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
		}

		/deep/ .uni-easyinput {
			box-shadow: -3upx 0 7upx rgba(220, 220, 220, .35);
		}

		/deep/ .uni-select {
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
			box-shadow: -3upx 5upx 15upx rgba(220, 220, 220, .35);
			border: 0
		}

		/deep/ .uni-forms-item__label {
			padding-bottom: 25upx;

			text {
				font-size: 30upx;
				color: #000;
			}

		}
		
		/deep/ .uni-easyinput__content.is-disabled {
			color: #333;
		}

		/deep/ .uni-date__x-input {
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
			box-shadow: 10upx 0 7upx rgba(220, 220, 220, .35);
			line-height: 60upx !important;
			margin-left: 0upx;
			font-size: 24upx;
			color: #666666;
		}

		/deep/ .input-value {
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
			box-shadow: -3upx 0upx 7upx rgba(220, 220, 220, .35);
			line-height: 60upx !important;
			border: 0;
		}

		/deep/ .checklist-box {
			&:last-child {
				margin-right: 0;
			}
		}

		/deep/ .uni-forms-item__label {
			padding-bottom: 0 !important;

			text {
				font-size: 26upx;
				color: #333333;
			}

			padding-right: 0;
		}

		/deep/ .uni-date__x {
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
			box-shadow: -3upx 0upx 7upx rgba(220, 220, 220, .35);
			line-height: 60upx !important;
			width: 240upx;
			border: 0;
		}

		/deep/ .uni-date {
			width: 240upx;
			border: 0;

			&:nth-child(1) {
				margin-right: 10upx;
			}
		}

		/deep/ .uni-date-x--border {
			border: 0;
			box-shadow: -3upx 0upx 7upx rgba(220, 220, 220, .35);
		}
	}
</style>